<template>
  <!-- 运输步骤条 -->
  <Step-bar
    :dataSource="stepDatas"
    v-if="orderStep !== 19 && orderStep !== 26 && orderStep !== 13"
    class="step"
  ></Step-bar>

  <!-- 运输状态 -->
  <van-row class="transport" :class="!orderDescribe ? 'no__memo' : ''" v-if="orderStep !== 19 && orderStep !== 26">
    <van-col span="4" class="icon">
      <span class="iconfont" v-if="!svg" v-html="icon"></span>
      <svg-icon :name="svg" v-else></svg-icon>
    </van-col>
    <van-col span="20">
      <div class="title">{{ orderStatus }}</div>
      <div class="describe">{{ orderDescribe }}</div>
    </van-col>
    <div class="detailBtn" v-show="detail.consToDriverStatus === 2" @click="goDetail">查看详情</div>
  </van-row>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import StepBar from '@/components/StepBar.vue'
import { BillTabsEm } from '@/store/enums'
import {
  LoadReceiptStatusEm,
  PayStatusEm,
  LoadRejectStatusEm,
  UnloadReceiptStatusEm,
  UnloadRejectStatusEm,
  BillAllStatusEm
} from '../utils/enums'
import { useRouter } from 'vue-router'

interface State {
  orderStatus: string
  orderDescribe: string
  icon: string
  isComments: boolean
  stepDatas: any[]
  svg?: string
}

export default defineComponent({
  name: 'OrderStep',
  components: { StepBar },
  props: {
    orderStep: {
      type: Number,
      require: true
    },
    consComments: {
      type: Object || undefined,
      default: {},
      require: true
    },
    detail: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const router = useRouter()
    const stepDatas = [
      {
        name: '派单',
        checked: true
      },
      {
        name: '待装货',
        checked: false
      },
      {
        name: '运输中',
        checked: false
      },
      {
        name: '待签收',
        checked: false
      },
      {
        name: '待结算',
        checked: false
      },
      {
        name: '完成',
        checked: false
      }
    ]

    const state = reactive<State>({
      orderStatus: '',
      orderDescribe: '',
      icon: '',
      isComments: false, //评价状态
      stepDatas,
      svg: ''
    })

    watch([() => props.orderStep, () => props.consComments], ([orderStep, consComments]) => {
      state.isComments = props.detail.consToDriverStatus === 2 ? true : false
      initList()
    })

    // 判断步骤条是否高亮
    const isHighlight = (num: number) => {
      state.stepDatas.find((item, index) => (item.checked = false))
      for (let i = 0; i <= num; i++) {
        state.stepDatas[i].checked = true
      }
    }

    function initList() {
      const detail: any = props.detail
      switch (props.orderStep) {
        case BillTabsEm.WAIT_RE.value:
          state.orderStatus = '待接单'
          state.orderDescribe = '平台为您派单中，请稍候'
          state.icon = '&#xe69d;'
          isHighlight(0)
          break
        case BillTabsEm.FORWARDING.value:
          state.orderStatus = '待确认'
          if (
            detail.loadReceiptStatus === LoadReceiptStatusEm.ALREADY_UPLOAD.value &&
            detail.loadRejectStatus === LoadRejectStatusEm.NOT_REJECTED.value
          ) {
            // 已上传 未驳回
            state.orderStatus = '待确认'
            state.orderDescribe = '请等待货主确认单据'
            state.orderDescribe = '司机已完成装货，请查看单据进行确认'
          } else if (
            detail.loadReceiptStatus === LoadReceiptStatusEm.ALREADY_UPLOAD.value &&
            detail.loadRejectStatus === LoadRejectStatusEm.REJECT.value
          ) {
            // 已驳回
            state.orderStatus = '已驳回'
            state.orderDescribe = detail.loadRejectReason ? `驳回理由：${detail.loadRejectReason}` : ''
          } else {
            state.orderStatus = '待装货'
            state.orderDescribe = '您的货物待装货,如有需要可以联系承运人'
          }
          state.icon = '&#xe635;'
          isHighlight(1)
          break
        case BillTabsEm.In_TRANSIT.value:
          state.orderStatus = '运输中'
          state.orderDescribe = '您的货物正在运输中,请耐心等待'
          state.icon = '&#xed6d;'
          isHighlight(2)
          break
        case BillTabsEm.TO_SIGNED.value:
          state.orderStatus = '待确认'
          if (
            detail.unloadReceiptStatus === UnloadReceiptStatusEm.ALREADY_UPLOAD.value &&
            detail.unloadRejectStatus === UnloadRejectStatusEm.REJECT.value
          ) {
            state.orderDescribe = '司机已完成卸货，请查看单据进行签收'
            state.orderStatus = '已驳回'
            state.orderDescribe = detail.unloadRejectReason ? `驳回理由：${detail.unloadRejectReason}` : ''
          } else {
            state.orderStatus = '待确认'
            state.orderDescribe = '请您及时确认签收哦'
          }

          state.icon = '&#xe750;'
          isHighlight(3)
          break
        case BillTabsEm.SIGNED.value:
          if (detail.payStatus === PayStatusEm.NO_MONTH_PAY.value) {
            // 月结
            state.orderDescribe = '您还未支付月结运费，请尽快支付'
            state.orderStatus = '未支付月结'
          } else if (detail.payStatus === PayStatusEm.NO_RECEIPT_PAY.value) {
            // 回单
            state.orderDescribe = '您还未支付回单运费，请尽快完成支付'
            state.orderStatus = '未支付回单付'
          }
          state.icon = '&#xe750;'
          isHighlight(4)
          break
        case BillTabsEm.FINISHED.value:
          state.orderStatus = state.isComments ? '已评价' : '待评价'
          state.orderDescribe = state.isComments ? '感谢您的评价,期待下次再为您服务' : '欢迎对本次司机的运输做出评价'
          // state.icon = '&#xe607;'
          state.svg = 'eva'
          isHighlight(5)
          break
        case BillAllStatusEm.CANCELLED.value:
          state.orderStatus = '已取消'
          state.orderDescribe = '您的订单已取消,欢迎再次发货'
          state.icon = '&#xe60b;'
          break
        case BillAllStatusEm.REJECT.value:
          state.orderStatus = '已拒绝'
          state.orderDescribe = '您的订单已被指定的承运人拒绝，欢迎再次发货'
          state.icon = '&#xe60b;'
          break
      }
    }

    const goDetail = () => {
      router.push({ name: 'Evaluate', params: { params: JSON.stringify(props.detail) } })
    }

    return {
      ...toRefs(state),
      goDetail
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.transport {
  @include lattice-base;
  position: relative;
  .detailBtn {
    position: absolute;
    top: 13px;
    right: 10px;
    color: $color-primary;
  }
  .icon {
    position: relative;
  }
  .iconfont,
  svg {
    position: absolute;
    top: 50%;
    transform: translateY(-90%);
    font-size: 24px;
  }
  // 标题
  .title {
    color: $color-text-primary;
    font-size: 16px;
    margin-bottom: 8px;
  }
  // 描述
  .describe {
    color: $color-text-regular;
  }
}
.no__memo {
  .iconfont,
  svg {
    transform: translateY(-50%);
  }
  .title {
    margin-bottom: 0;
  }
}
.step {
  margin-bottom: 12px;
  border-radius: 5px;
}
</style>
